<template>
  <div>
    <!-- 菜单 -->
    <div class="top-warp">
      <div class="nav">
        <div :class="{'active':tabType==0}" @click="changeTab(0)">全部</div>
        <div :class="{'active':tabType==1}" @click="changeTab(1)">已付款</div>
        <div :class="{'active':tabType==2}" @click="changeTab(2)">未付款</div>
      </div>
    </div>

    <!--全部-->
    <mescroll-vue ref="mescroll0" v-show="tabType==0" :up="getMescrollUp(0)" @init="mescrollInit0">
      <ul id="dataList0">
        <li class="data-li" v-for="item in tab0.list">
          <div class="con" @click="zhifu(item.good_id,item.type,item.course_status,item.status,item.child_id,item.id)">
				 <img :src='imgurl+item.good_thumb' alt="">
				 <div class="right">
					 <p>{{item.good_name}}</p>
					 <p  class="rightgrad" v-if='item.status==1||item.status=="1"'>支付金额: ¥{{item.amount}}</p>
					 <p v-else  class="rightred">支付金额: ¥{{item.amount}}</p>
					 <p class="p1">
						 <span class="righttag">{{item.tag_name}}</span>
						 <span class="rightgrad" v-if='item.status==1||item.status=="1"'>购买时间: {{item.addtime}}</span>
						 <span  class="rightred" v-else>订单即将失效，请尽快支付</span>
					 </p>
				 </div>
          </div>
          <div class="arrpay" @click="zhifu(item.good_id,item.type,item.course_status,item.status,item.child_id,item.id)" v-if="(item.type==3||item.type=='3')&&(item.is_chapter==1||item.is_chapter=='1')&&(item.status==1||item.status=='1')">
			 <div class="arrpayleft">
				 已购买该班级下部分阶段课程
			 </div>
			 <div class="arrpayright">
				 <p>前去学习</p>
				 <img src="../../../src/assets/img/gotostudy.png" alt="">
			 </div>
          </div>
        </li>
      </ul>
    </mescroll-vue>

    <!-- 已付款-->
    <mescroll-vue ref="mescroll1" v-show="tabType==1" :up="getMescrollUp(1)" @init="mescrollInit1">
        <ul id="dataList1">
			<li class="data-li" v-for="item in tab1.list">
				<div class="con" @click="zhifu(item.good_id,item.type,item.course_status,111,11,item.id)">
					 <img :src='imgurl+item.good_thumb' alt="">
					 <div class="right">
						 <p>{{item.good_name}}</p>
						 <p class="rightgrad">支付金额: ¥{{item.amount}}</p>
						 <p class="p1">
							 <span class="righttag">{{item.tag_name}}</span>
							 <span class="rightgrad">购买时间: {{item.addtime}}</span>
						 </p>
					 </div>
				</div>
				<div class="arrpay" @click="zhifu(item.good_id,item.type,item.course_status,111,11)" v-if="(item.type==3||item.type=='3')&&(item.is_chapter==1||item.is_chapter=='1')">
					 <div class="arrpayleft">
						 已购买该班级下部分阶段课程
					 </div>
					 <div class="arrpayright">
						 <p>前去学习</p>
						 <img src="../../../src/assets/img/gotostudy.png" alt="">
					 </div>
				</div>
			</li>
        </ul>
    </mescroll-vue>

    <!-- 未付款 -->
    <mescroll-vue ref="mescroll2" v-show="tabType==2" :up="getMescrollUp(2)" @init="mescrollInit2">
      <ul id="dataList2">
        <li class="data-li" v-for="item in tab2.list">
          <div class="con" @click="weifu(item.good_id,item.type,item.child_id,item.id,item.course_status)">
			 <img :src='imgurl+item.good_thumb' alt="">
			 <div class="right">
				 <p>{{item.good_name}}</p>
				 <p class="rightred">支付金额: ¥{{item.amount}}</p>
				 <p class="p1">
					 <span class="righttag">{{item.tag_name}}</span>
					 <span class="rightred">订单即将失效，请尽快支付</span>
				 </p>
			 </div>
          
          </div>
        </li>
      </ul>
    </mescroll-vue>

  </div>
</template>

<script>
// 引入mescroll的vue组件
import MescrollVue from 'mescroll.js/mescroll.vue'

export default {
  name: 'Collect',
  components: {
    MescrollVue
  },
  data () {
    return {
			imgSrc:require("../../assets/img/kongbai.png"),
      tab0: {mescroll: null, list: [], isListInit: false}, // 全部
      tab1: {mescroll: null, list: [], isListInit: false}, // 已付款
      tab2: {mescroll: null, list: [], isListInit: false}, // 未付款
      tabType: 0 ,// 菜单类型
			imgurl:this.$store.state.img,
			chenload:false,
    }
  },
  methods: {
	  zhifu(id,type,course_status,status,child_id,orderid){
		if(course_status==0||course_status=='0'){
		  	layer.open({
		  	  	content: '该课程已下架',
		  	  	skin: 'msg',
		  	  	time: 2 //1秒后自动关闭
		  	});
		}else{
			if(status==0||status=='0'){
				this.$router.push({
				  path:'/order',
				  query:{
						// id:good_id,
						order_id:orderid,
						type:type,
						pay:1,
						specids:child_id,
				  }
				})
			}else{
				if(type=='1'||type==1){
					this.$router.push({
				   path:'/course',
				   query:{
					  cid:id
				   }
				 })
				}else if(type=='2'||type==2){
					this.$router.push({
				   path:'/specialtopic',
				   query:{
					  stid:id
				   }
				 })
				}else if(type=='3'||type==3){
				   this.$router.push({
				   path:'/class',
				   query:{
					  bid:id
				   }
				 })
				}
			}
				
			
		}
	  },
	  weifu(good_id,type,child_id,id,course_status){
		if(course_status==0||course_status=='0'){
			  layer.open({
			  	content: '该课程已下架',
			  	skin: 'msg',
			  	time: 2 //1秒后自动关闭
			  });
		}else{
			this.$router.push({
			  path:'/order',
			  query:{
				// id:good_id,
				order_id:id,
				type:type,
				pay:1,
				specids:child_id,
			  }
			})
		}
	  },
    // mescroll组件初始化的回调,可获取到mescroll对象
    mescrollInit0 (mescroll) {
      mescroll.tabType = 0; // 加入标记,便于在回调中取到对应的list
      this.tab0.mescroll = mescroll;
    },
    mescrollInit1 (mescroll) {
      mescroll.tabType = 1;
      this.tab1.mescroll = mescroll;
    },
    mescrollInit2 (mescroll) {
      mescroll.tabType = 2;
      this.tab2.mescroll = mescroll;
    },
    
    // 多mescroll的配置,需通过方法获取,保证每个配置是单例
    getMescrollUp (tabType) {
      let emptyWarpId = 'dataList' + tabType;
      return {
        auto: true,
        callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
        noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
        empty: {
          warpId: emptyWarpId, // 父布局的id;
          icon: this.imgSrc, // 图标,默认null
          tip: '您暂未有购买记录', // 提示
          
        },
        
      }
    },
 
    /* 上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
    upCallback (page, mescroll) {
      if (mescroll.tabType === 0) {
        // 全部
        this.tab0.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
		this.axios.get(this.$store.state.url +'User/allOrderList',{
			 params:{
				page: page.num,
				limit:page.size
			 }
		 }).then(res=>{
							// console.log(res.data.data.class)
			this.chenload = true;
			if(res.data.errcode==0||res.data.errcode=='0'){
			var curPageData = res.data.data.order;
			  mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
			 if (page.num === 1) this.tab0.list = []; // 如果是第一页需手动制空列表
			 this.tab0.list = this.tab0.list.concat(curPageData); // 追加新数据
			 // this.tab0.list=res.data.data.order
			}
		
		})
      } else if (mescroll.tabType === 1) {
        // 已付款
		    this.tab1.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
        this.axios.get(this.$store.state.url +'User/orderList',{
        	 params:{
        		page: page.num,
        		limit:page.size
        	 }
         }).then(res=>{
        	// console.log(res.data.data.class)
        	this.chenload = true;
        	if(res.data.errcode==0||res.data.errcode=='0'){
        	var curPageData = res.data.data.order;
        	  mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
        	 if (page.num === 1) this.tab1.list = []; // 如果是第一页需手动制空列表
        	 this.tab1.list = this.tab1.list.concat(curPageData); // 追加新数据
        	 // this.tab0.list=res.data.data.order
        	}
        
        })
      } else if (mescroll.tabType === 2) {
        // 未付款
        this.tab2.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
        this.axios.get(this.$store.state.url +'User/noPayOrderList',{
        	 params:{
        		page: page.num,
        		limit:page.size
        	 }
         }).then(res=>{
        	// console.log(res.data.data.class)
        	this.chenload = true;
        	if(res.data.errcode==0||res.data.errcode=='0'){
        	var curPageData = res.data.data.order;
        	  mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
        	 if (page.num === 1) this.tab2.list = []; // 如果是第一页需手动制空列表
        	 this.tab2.list = this.tab2.list.concat(curPageData); // 追加新数据
        	 // this.tab0.list=res.data.data.order
        	}
        
        })
      }
    },

    // 切换菜单
    changeTab (type) {
      let curTab = this.getTabData(this.tabType);// 当前列表
      let newTab = this.getTabData(type);// 新转换的列表
      // curTab.mescroll.hideTopBtn(); // 隐藏当前列表的回到顶部按钮
      this.tabType = type // 切换菜单
      if (!newTab.isListInit) {
        newTab.mescroll.triggerDownScroll(); // 加载列表
      } else {
      }
    },
    // 获取菜单对应的数据
    getTabData (tabType) {
      if (tabType == null) tabType = this.tabType;
      if (tabType === 0) {
        return this.tab0;
      } else if (tabType === 1) {
        return this.tab1;
      } else if (tabType === 2) {
        return this.tab2;
      } 
    },
  },
  mounted(){
		this.sdk.getJSSDK('','',this.$store.state.url);	
// 	  this.getMescrollUp(this.tabType);
// 	  this.getMescrollDown(this.tabType)
  }
  
}
</script>

<style scoped>
  /*以fixed的方式固定mescroll的高度*/
  .mescroll {
    position: fixed;
    top: .88rem;
    bottom: 0;
    height: auto;
  }

  .top-warp{
    z-index: 9990;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: .88rem;
    background-color: white;
  }
  .top-warp .head{
    width: 100%;
    height: .88rem;
    line-height: .88rem;
    text-align: center;
  }
  .top-warp .nav{
    text-align: center;
    height: .8rem;
    background: white;
	box-shadow:0px 3px 5px 0px rgba(71,68,80,0.06);
	display: flex;
	justify-content: space-around;
  }
  .top-warp .nav > div{
	  font-weight: 600;
    line-height: .8rem;
    font-size: .3rem;
	color: #C2C9D3;
  }
  .top-warp .nav .active{
    border-bottom: 2px solid #0287FF;
    color: #0287FF;
  }

  /*展示上拉加载的数据列表*/
  .data-li{
    position: relative;
	padding-bottom: .3rem;
    border-bottom: 1px solid #EDEDED;
  }
  
  .con{
      width: 92%;
      margin: auto;
      height: 1.18rem;
      margin-top: 0.3rem;
    }
  .con img{
    width:2.1rem;
    height:100%;
    border-radius:0.08rem;
    float: left;
   }
  .right{
    margin-left: 2.3rem;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }
  .right p{
    width: 100%;
  }
  .right p:nth-child(1){
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .right P:nth-child(2){
    font-size:0.24rem;
    color:rgba(255,2,20,1);
    text-align: right;
  }
  .p1 span:nth-child(1){
    display: inline-block;
    text-align: center;
  	padding: 0 .1rem;
    /* width:1.28rem; */
    height:0.37rem;
    background:rgba(255,255,255,1);
    border:0.02rem solid rgba(2,135,255,1);
    border-radius:0.19rem;
    font-size:0.24rem;
    /*color:rgba(2,135,255,1);*/
    line-height:0.32rem;
  }
  .p1 span:nth-child(2){
    font-size:0.24rem;
    /*color:rgba(153,153,153,1);*/
    line-height:0.32rem;
    float: right;
  }
  
  .righttag{
	  color: #0287FF;
  }
  
  .rightred{
	  color: #FF0214 !important;
  }
  
  .rightgrad{
  	  color: #999999 !important;
  }
  
  .arrpay{
  	width: 6.9rem;
  	height:.5rem;
  	margin:.1rem auto;
  	line-height: .5rem;
  	color: #E22F3A;
  	font-size: .24rem;
  	display: flex;
  	justify-content: space-between;
  	background: #FCE5D3;
  	padding-right: .2rem;
  }
  .arrpayleft{
  	padding-left: .2rem;
  }
  .arrpayright p{
  	display: inline-block;
  }
  .arrpayright img{
  	width: .1rem;
  	height: .2rem;
  	vertical-align: middle;
  	/* padding-right: .2rem; */
  }
</style>
